<template>
  <div class="homePage">
    <!-- 首页面 -->
    <!-- 轮播图 -->
    <header class="carousel">
      <CarouselMap :carList="carouselMapList"></CarouselMap>
    </header>
    <!-- 商品列表区域 -->
    <div class="shop-box">
      <div class="main">
        <!-- 手机区域 -->
        <div class="phone">
          <div class="box-hd">
            <div class="title">手机</div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <img :src="$target + 'public/imgs/phone/phone.png'" alt="" />
            </div>
            <!-- 手机渲染 -->
            <div class="list">
              <my-list :listData="promoList"></my-list>
            </div>
          </div>
        </div>
        <!-- 家电区域 -->
        <div class="appliance" id="promo-menu">
          <div class="box-hd">
            <div class="title">家电</div>
            <div class="more">
              <div class="myMenu">
                <ul>
                  <li
                    :class="applianceActive == 1 ? 'active' : ''"
                    @mouseover="applianceMouseOver($event, 1)"
                  >
                    热门
                  </li>
                  <li
                    :class="applianceActive == 2 ? 'active' : ''"
                    @mouseover="applianceMouseOver($event, 2)"
                  >
                    电视
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <ul>
                <li>
                  <img :src="$target + 'public/imgs/appliance/appliance-promo1.png'" />
                </li>
                <li>
                  <img :src="$target + 'public/imgs/appliance/appliance-promo2.png'" />
                </li>
              </ul>
            </div>
            <div class="list">
              <my-list :listData="applianceHotList"></my-list>
            </div>
          </div>
        </div>
        <!-- 配件商品展示区域 -->
        <div class="accessory">
          <div class="box-hd">
            <div class="title">配件</div>
            <div class="more">
              <div class="myMenu">
                <ul>
                  <li
                    :class="partsActive == 1 ? 'active' : ''"
                    @mouseover="partsMouseOver($event, 1)"
                  >
                    热门
                  </li>
                  <li
                    :class="partsActive == 2 ? 'active' : ''"
                    @mouseover="partsMouseOver($event, 2)"
                  >
                    保护套
                  </li>
                  <li
                    :class="partsActive == 3 ? 'active' : ''"
                    @mouseover="partsMouseOver($event, 3)"
                  >
                    充电器
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <ul>
                <li>
                  <img
                    :src="$target + 'public/imgs/accessory/accessory-promo1.png'"
                    alt
                  />
                </li>
                <li>
                  <img
                    :src="$target + 'public/imgs/accessory/accessory-promo2.png'"
                    alt
                  />
                </li>
              </ul>
            </div>
            <div class="list">
              <my-list :listData="partsHotList"></my-list>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "@/api/homePageApi";
import MyList from "../MyList.vue";
export default {
  components: {
    MyList,
  },
  data() {
    return {
      carouselMapList: [], // 轮播数据
      promoList: [], // 手机数据
      applianceList: [], // 家电热门数据
      TVListData: [], // 电视数据
      partsList: [], // 配件热门数据
      coverListData: [], //保护套数据
      chargerListData: [], //充电器数据
      applianceHotList: [], // 空 家电热门数据
      partsHotList: [], // 空 配件热门数据
      applianceActive: 1, // 家电热门数据 状态
      partsActive: 1, //配件热门数据 状态
    };
  },
  mounted() {
    this.getCarousel();
    this.getProduct("promoList", { categoryName: "手机" }); // 手机
    this.getProduct(
      "applianceHotList",
      { categoryName: ["电视机", "空调", "洗衣机"] },
      true
    ); // 家电热门
    this.getProduct("TVListData", { categoryName: "电视机" }); // 电视
    this.getProduct(
      "partsHotList",
      { categoryName: ["保护套", "保护膜", "充电器", "充电宝"] },
      true
    ); // 配件热门
    this.getProduct("coverListData", { categoryName: "保护套" }); // 保护套
    this.getProduct("chargerListData", { categoryName: "充电器" }); // 充电器
  },
  methods: {
    // 获取轮播数据
    async getCarousel() {
      let { data: res } = await axios.carouselData();
      this.carouselMapList = res.carousel;
    },
    // 商品数据获取
    async getProduct(dataName, data, flag) {
      if (flag) {
        // 请求的是热门数据
        var { data: res } = await axios.getHotProduct(data);
      } else {
        // 请求的是单个商品的数据
        var { data: res } = await axios.getPromoProduct(data);
      }
      this[dataName] = res.Product;
    },
    // 监听电器热门 状态的改变
    applianceMouseOver($event, val) {
      this.applianceActive = val;
    },
    // 监听配件热门 状态的改变
    partsMouseOver($event, val) {
      this.partsActive = val;
    },
  },
  watch: {
    // 监听电器热门 状态的改变
    applianceActive(val) {
      // 原有家电热门的长度等于0
      if (!this.applianceList.length) {
        this.applianceList = this.applianceHotList;
      }
      this.applianceHotList = val == 1 ? this.applianceList : this.TVListData;
    },
    // 监听配件热门 状态的改变
    partsActive(val) {
      if (!this.partsList.length) {
        this.partsList = this.partsHotList;
      }
      let data;
      switch (val) {
        case 1:
          data = this.partsList;
          break;
        case 2:
          data = this.coverListData;
          break;
        case 3:
          data = this.chargerListData;
          break;

        default:
          break;
      }
      this.partsHotList = data;
    },
  },
};
</script>
<style lang="scss" scoped>
.carousel {
  width: 85%;
  margin: 20px auto;
}
.shop-box {
  background-color: #f5f5f5;
  padding-bottom: 20px;
}

.main {
  margin: 0 auto;
  max-width: 1225px;
}

.box-hd {
  height: 58px;
  margin: 20px 0 0 0;
  .title {
    float: left;
    font-size: 22px;
    font-weight: 200;
    line-height: 58px;
    color: #333;
  }
  .more {
    float: right;
    a {
      font-size: 16px;
      line-height: 58px;
      color: #424242;
      &:hover {
        color: #ff6700;
      }
    }
    .myMenu li {
      float: left;
      margin-left: 30px;
      &.active,
      &:hover {
        color: #ff6700;
        border-bottom: 2px solid #ff6700;
      }
    }
  }
}

.box-bd {
  height: 615px;
  .promo-list {
    float: left;
    height: 615px;
    width: 234px;
    li {
      z-index: 1;
      width: 234px;
      height: 300px;
      margin-bottom: 14.5px;
      -webkit-transition: all 0.2s linear;
      transition: all 0.2s linear;
      &:hover {
        z-index: 2;
        -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        -webkit-transform: translate3d(0, -2px, 0);
        transform: translate3d(0, -2px, 0);
      }
      img {
        width: 234px;
        height: 300px;
      }
    }
    img {
      width: 234px;
    }
  }
  .list {
    float: left;
    height: 615px;
    width: 991px;
  }
}
</style>
